<template>
  <div class="widgets" v-if="mode !== 'view'">
    <p class="title">组件</p>
    <div style="padding: 0px 6px 5px 6px">
      <a-input-search
        placeholder="请输入搜索内容"
        v-model="widgetSearchKeyword"
        enter-button
        @search="onWidgetSearch"
      />
    </div>
    <div class="widget-list">
      <a-menu
        style="width: 100%"
        :open-keys="openKeys"
        mode="inline"
        :selectable="false"
        @openChange="onOpenChange"
      >
        <a-sub-menu v-for="group in widgets" :key="group.key">
          <span slot="title">{{ group.title }}</span>

          <template v-for="widget in group.chilren">
            <a-menu-item v-if="widget.show" :key="widget.key">
              <div
                class="widget-item"
                :class="{ active: onWidgetActive(widget.key) }"
                draggable="true"
                @dragstart="onDragStart($event, widget, 'widget')"
              >
                <!-- <svg class="icon" aria-hidden="true">
                  <use :xlink:href="'#icon-' + widget.icon"></use>
                </svg> -->
                <a-icon type="thunderbolt" />
                {{ widget.name }}
              </div>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </a-menu>
    </div>
  </div>
</template>

<script>
import { isEmpty, findIndex } from "lodash";
import widgets from "../config/widgets.json";
export default {
  name: "WidgetList",
  props: {
    mode: {
      type: String,
      default: "edit"
    }
  },
  data() {
    return {
      // 组件列表
      widgets,
      widgetSearchKeyword: "",
      activeWidgetKeys: [],
      openKeys: []
    };
  },
  methods: {
    // 获取控件的配置信息
    getWidgetDataByType(type) {
      return new Promise((resolve, reject) => {
        for (let i = 0; i < this.widgets.length; i++) {
          const group = this.widgets[i];
          const valueArr = group.chilren;
          for (let j = 0; j < valueArr.length; j++) {
            const value = valueArr[j];
            if (value.type === type) {
              resolve(value);
            }
          }
        }
        reject(false);
      });
    },
    // 组件搜索
    onWidgetSearch(keyword) {
      if (isEmpty(keyword)) {
        return;
      }
      this.activeWidgetKeys = [];
      this.openKeys = [];
      for (let i = 0; i < this.widgets.length; i++) {
        const group = this.widgets[i];
        const valueArr = group.chilren;
        for (let j = 0; j < valueArr.length; j++) {
          const value = valueArr[j];
          if (value.name.indexOf(keyword) !== -1) {
            if (this.activeWidgetKeys.length === 0) {
              this.activeWidgetKeys.push(value.key);
              this.openKeys.push(group.key);
            }
          }
        }
      }
    },
    // 组件active状态
    onWidgetActive(key) {
      const index = findIndex(this.activeWidgetKeys, activeKey => {
        return key === activeKey;
      });
      return index !== -1;
    },
    onOpenChange(openKeys) {
      if (openKeys.length == 0) {
        this.openKeys = [];
      } else {
        if (openKeys.length == 1) {
          this.openKeys = openKeys;
        } else {
          this.openKeys = [openKeys[openKeys.length - 1]];
        }
      }
    },

    // 拖拽开始
    onDragStart(e, data, key) {
      this.dragInfo = {
        key,
        data
      };
    }
  }
};
</script>

<style lang="less" scoped>
.widgets {
  flex-shrink: 0;
  width: 240px;
  height: 100%;
  margin-right: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px solid #d0d9e7;
  display: flex;
  flex-direction: column;
  .title {
    line-height: 40px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
    border-bottom: 1px solid #d0d9e7;
  }
  .widget-list {
    flex: 1;
    overflow: auto;
    /deep/ .ant-menu-submenu-open {
      background: #e6f7ff;
    }

    /deep/ .ant-menu-submenu-title {
      margin: 0;
      font-size: 15px;
      height: 48px;
      line-height: 48px;
    }

    .ant-menu-submenu-inline {
      border-bottom: 1px solid #d0d9e7;
    }

    .ant-menu-item-active {
      background: #e6f7ff;
    }

    .widget-item {
      display: flex;
      padding-left: 28px;
      align-items: center;
      height: 40px;
      cursor: move;
      font-size: 12px;
      color: #2c4766;

      &.active {
        border: 2px solid #1e9efb;
      }

      .icon {
        width: 20px;
        height: 20px;
        margin-left: 8px;
        margin-right: 5px;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
}
/deep/ .ant-menu-inline .ant-menu-submenu-title {
  margin: 0;
}
</style>
